<script setup lang="ts">
import { reactive, ref } from 'vue'
const title = ref('Hello')

const baseList = ref([
  {
    key: 'add',
    title: '加入会议'
  },
  {
    key: 'quick',
    title: '快速会议'
  },
  {
    key: 'ok',
    title: '预定会议'
  },
  {
    key: 'share-screen',
    title: '共享屏幕'
  }
])

const handleClick = () => {}

const meetingList = reactive([])
</script>

<template>
  <view class="page">
    <!-- 个人信息 -->
    <up-cell-group>
      <up-cell title="橙子" label="UID: 123131654" :border="false">
        <template #icon>
          <view>
            <up-avatar text="橙" />
          </view>
        </template>
      </up-cell>
    </up-cell-group>
    <!-- 功能入口 -->
    <view class="meeting-entry">
      <up-grid :border="false" :col="4" gap="10px" @click="handleClick">
        <up-grid-item v-for="item in baseList" :key="item.key">
          <view class="meeting-item">
            <view :class="`iconfont icon-${item.key}`" />
            <text class="title">{{ item.title }}</text>
          </view>
        </up-grid-item>
      </up-grid>
    </view>
    <!-- 全部会议 -->
    <view class="history-meeting">
      <view class="container">
        <text>全部会议</text>
        <up-icon name="arrow-right" color="#909399" />
      </view>
    </view>
    <!-- 会议列表 -->
    <view class="meeting-list">
      <up-empty :show="meetingList.length === 0" icon="/src/static/images/coffee.png" :width="72" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.meeting-entry {
  margin: 16px 0;
  .meeting-item {
    text-align: center;
    .iconfont {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      margin-bottom: 4px;
      overflow: hidden;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      background: $u-primary;
      border-radius: 20px;
    }

    .title {
      font-size: 14px;
    }
  }
}

.history-meeting {
  display: flex;
  justify-content: flex-end;
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-right: 10px;
    font-size: 12px;
    color: #909399;
    background-color: #f4f4f5;
    border-radius: 5px;
  }
}

.meeting-list {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - $remainingHeight);
  margin-top: 10px;
  $remainingHeight: calc(72px + 85px + 32px + 24px + 10px + 60px);
}
</style>
